<template>
  <div>
    <!-- 顶部横幅 -->
    <div class="banner">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item, key) in banner" :key="key">
          <el-image
            style="width: 540px; height: 200px"
            :src="item.imageUrl"
            fit="fill"
          ></el-image>
          <div class="typeTitle">{{ item.typeTitle }}</div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 推荐歌单 -->
    <div
      class="title"
      @click="pushChildRouter('/view/find/musiclist', '歌单', '3')"
    >
      推荐歌单 <i class="el-icon-arrow-right"></i>
    </div>
    <div class="recommend">
      <div class="everydaySongs" @dblclick="toRecommendSongsPage">
        <div class="date">
          <i class="el-icon-date"></i>
          <div>{{ today }}</div>
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="name">每日歌曲推荐</div>
      </div>

      <div
        v-for="item in recommendList"
        :key="item.id"
        @dblclick="toSonglistPage(item.id)"
      >
        <el-image
          style="width: 160px; height: 160px"
          :src="item.picUrl"
          fit="fill"
        ></el-image>
        <div class="playCount">
          <i class="el-icon-caret-right"></i>
          {{ item.playCount }}
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>

    <!-- 独家放送 -->
    <div class="title">独家放送 <i class="el-icon-arrow-right"></i></div>
    <div class="privatecontent">
      <div v-for="item in privatecontent" :key="item.id">
        <el-image
          style="width: 290px; height: 162px"
          :src="item.sPicUrl"
          fit="fill"
        ></el-image>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div>{{ item.name }}</div>
      </div>
    </div>

    <!-- 最新音乐 -->
    <div
      class="title"
      @click="pushChildRouter('/view/find/newest', '最新音乐', '6')"
    >
      最新音乐 <i class="el-icon-arrow-right"></i>
    </div>
    <div class="newsongs" v-double-click>
      <div
        v-for="item in newsong"
        :key="item.id"
        @dblclick="playSong(item, newsong)"
      >
        <div>
          <el-image
            style="width: 80px; height: 80px"
            :src="item.picUrl"
            fit="fill"
          ></el-image>
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="text">
          <div class="name">{{ item.name }}</div>
          <div class="artistname">{{ item.artistname }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 横幅
      banner: [],
      // 今日日期
      today: '',
      // 每日推荐歌单
      recommendList: [],
      // 独家方式
      privatecontent: [],
      // 最新音乐
      newsong: [],
    }
  },
  created() {
    this.getToday()
    this.getBanner()
    this.getNewsong()
    this.getRecommendLists()
    this.getPrivatecontent()
    this.keepRouterHighlight()
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeIsMyself',
      'changeSongerId',
      'changeSonglistId',
      'changeMusicPlayInfo',
      'changeTheDetailUserId',
    ]),

    // 获取今天的日期
    getToday() {
      const td = new Date()
      this.today = td.getDate()
    },
    // 获取顶部横幅
    async getBanner() {
      const { data: res } = await this.$http({
        url: `/banner?type=0`,
        withCredentials: true, //关键
      })
      // console.log(res)

      // 提取相关信息
      let tmepListDatas = []
      res.banners.map((item) => {
        let listObj = {}

        listObj.imageUrl = item.imageUrl
        listObj.targetId = item.targetId
        listObj.typeTitle = item.typeTitle

        return tmepListDatas.push(listObj)
      })

      this.banner = tmepListDatas
    },
    // 获取每日推荐歌单
    async getRecommendLists() {
      const { data: res } = await this.$http({
        url: `/homepage/block/page`,
        withCredentials: true, //关键
      })
      // console.log(res)

      // 提取相关信息
      let tmepListDatas = []
      res.data.blocks[1].creatives.map((item) => {
        let listObj = {}

        listObj.id = item.resources[0].resourceId
        listObj.name = item.resources[0].uiElement.mainTitle.title
        listObj.picUrl = item.resources[0].uiElement.image.imageUrl
        listObj.playCount = item.resources[0].resourceExtInfo.playCount

        return tmepListDatas.push(listObj)
      })

      // 为了整齐获取其他歌单加入其中
      const { data: res2 } = await this.$http({
        url: `/personalized?limit=3`,
        withCredentials: true, //关键
      })
      // 提取相关信息
      res2.result.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.picUrl
        listObj.playCount = item.playCount

        return tmepListDatas.push(listObj)
      })

      this.recommendList = tmepListDatas
    },
    // 获取独家放送
    async getPrivatecontent() {
      const { data: res } = await this.$http({
        url: `/personalized/privatecontent`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let tmepListDatas = []
      res.result.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.sPicUrl = item.sPicUrl

        return tmepListDatas.push(listObj)
      })

      this.privatecontent = tmepListDatas
    },
    // 获取最新歌曲
    async getNewsong() {
      const { data: res } = await this.$http({
        url: `/personalized/newsong?limit=12`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let tmepListDatas = []
      let index = 0
      res.result.map((item) => {
        let listObj = {}

        listObj.id = item.song.id
        listObj.time = item.song.duration
        listObj.name = item.song.name
        listObj.picUrl = item.picUrl

        let str = ''
        for (let i = 0; i < item.song.artists.length; i++) {
          str = str + item.song.artists[i].name
          if (i != item.song.artists.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str
        listObj.index = index
        index++

        return tmepListDatas.push(listObj)
      })

      this.newsong = tmepListDatas
      // console.log(this.newsong)
    },
    // 传递 歌单数据，并跳转到歌单页面
    toSonglistPage(songlistId) {
      const info = {
        path: '/view/songlist',
        isActive: songlistId,
        songlistId: songlistId,
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeSonglistId(info.songlistId)

      this.$emit('getSonglistId')
    },
    // 传递 跳转到每日推荐歌曲页面
    toRecommendSongsPage() {
      const info = {
        path: '/view/recommendsongs',
        isActive: '',
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)

      this.$emit('getRecommendsongsPageInfo')
    },
    // 播放歌曲
    playSong(row, list) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = list

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
    //   跳转到其他子路由
    pushChildRouter(path, name, active) {
      const info = {
        path: path,
        name: name,
        active: active,
      }
      this.$emit('pushOtherPage', info)
    },
    // 保持状态栏高亮
    keepRouterHighlight() {
      const active = '1'
      this.$emit('keepRouterHighlight', active)
    },
  },
}
</script>

<style lang="less" scoped>
.banner {
  padding-top: 10px;
  .el-carousel-item {
    position: relative;
  }
  .typeTitle {
    position: absolute;
    background-color: #cc4a4a;
    color: white;
    bottom: 0;
    right: 0;
    padding: 5px 9px;
    border-radius: 12px 0 0 0;
    font-size: 12px;
  }
  /deep/ .el-carousel {
    z-index: -9;
  }
  /deep/ .el-carousel__container {
    .is-active {
      width: 540px;
      height: 200px;
      border-radius: 12px;
      position: relative;
      left: -30px;
      .typeTitle {
        font-size: 14px;
      }
    }
  }
  /deep/ .el-carousel__button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  /deep/ li.is-active {
    .el-carousel__button {
      background-color: #ec4141;
    }
  }
}

.title {
  font-size: 21px;
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}
.recommend {
  display: flex;
  flex-wrap: wrap;
  > div {
    padding: 0px 12px 20px 12px;
    position: relative;
    cursor: pointer;
    .el-image {
      border-radius: 6px;
    }
    > .playCount {
      position: absolute;
      right: 17px;
      top: 2px;
      color: white;
      font-size: 13.6px;
    }
    > .play {
      position: absolute;
      right: 22px;
      bottom: 76px;
      border-radius: 50%;
      width: 32px;
      height: 31px;
      background-color: white;
      transition: 1s;
      opacity: 0;
      > .el-icon-caret-right {
        font-size: 28px;
        color: #ec4141;
        position: relative;
        left: 3px;
        top: 1px;
      }
    }
    > .name {
      width: 160px;
      font-size: 15px;
      padding-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      //将对象作为弹性伸缩盒子模型显示。
      display: -webkit-box;
      //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
      -webkit-box-orient: vertical;
      //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
      -webkit-line-clamp: 2;
    }
  }
  > .everydaySongs {
    > .date {
      border-radius: 6px;
      width: 160px;
      height: 160px;
      background-image: radial-gradient(#203e4c, #185469, #1b5265);
      position: relative;
      > .el-icon-date {
        color: white;
        font-size: 56px;
        position: relative;
        left: 50%;
        top: 12px;
        transform: translate(-50%, 0);
      }
      > div {
        color: white;
        font-size: 56px;
        text-align: center;
        padding-top: 12px;
      }
    }
  }
  > div:hover {
    transition: 1s;
    > .play {
      opacity: 1;
    }
  }
}
.privatecontent {
  display: flex;
  > div {
    padding: 0px 10px;
    padding-bottom: 24px;
    position: relative;
    cursor: pointer;
    > .el-image {
      border-radius: 6px;
    }
    > div {
      width: 280px;
    }
    > .play {
      position: absolute;
      left: 18px;
      top: 8px;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      border: 1px solid white;
      > .el-icon-caret-right {
        font-size: 28px;
        color: white;
        position: relative;
        left: 3px;
        top: 2px;
      }
    }
  }
}
.newsongs {
  display: flex;
  flex-wrap: wrap;
  > div {
    display: flex;
    width: 288px;
    height: 80px;
    border-radius: 6px;
    margin-right: 18px;
    margin-bottom: 12px;
    position: relative;
    cursor: pointer;
    > div {
      > .el-image {
        border-radius: 6px;
      }
      > .name {
        padding-left: 8px;
        padding-top: 6px;
        font-size: 14px;
        width: 188px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      > .artistname {
        font-size: 13px;
        color: #676767;
        padding-left: 8px;
        padding-top: 8px;
        width: 188px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    > .play {
      position: absolute;
      left: 18px;
      bottom: 18px;
      border-radius: 50%;
      width: 46px;
      height: 46px;
      padding: 0;
      background-color: white;
      > .el-icon-caret-right {
        font-size: 36px;
        color: #ec4141;
        position: relative;
        left: 5px;
        top: 5px;
      }
    }
  }
  > div:hover {
    background-color: #eaeaea;
  }
}
</style>